<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="25%"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div class="folder-upload-container">
      <div class="folder-path">
        <span>路径:</span>
        <el-link :underline="false">{{ getFolderPath }}</el-link>
      </div>
      <div class="folder-upload-file">
        <div class="upload-file-title">选择文件:</div>
        <el-upload
          ref="uploadFile"
          class="upload-file-vue"
          drag
          action="#"
          :auto-upload="false"
          multiple
          :on-change="uploadFileChange"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
      <div class="progress-title" v-if="percentage > 0">
        开始上传文件:
        <span style="margin-left: 10px">
          {{
            uploadFileSize > 1024
              ? Math.round(uploadFileSize / 1024, 0) + "KB"
              : uploadFileSize + "B"
          }}</span
        >
      </div>
      <div class="upload-progress" v-if="percentage > 0 && percentage < 100">
        <div>
          准备中
          <svg-icon
            icon-class="setting"
            color="#409EFF"
            class="upload-progress-svg-rotate"
          ></svg-icon>
        </div>
        <el-progress :percentage="percentage"></el-progress>
      </div>
      <div class="upload-wait-time" v-if="percentage >= 100">
        <span
          >预计等待时间:
          <span class="wait-content">{{
            $common.formatChineseTime(this.uploadFileTime)
          }}</span>
        </span>
        <span class="start-content">{{
          $common.formatChineseTime(this.startUploadTime)
        }}</span>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button
        type="primary"
        :loading="this.percentage > 0"
        @click="handleConfirm"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { uploadFile } from "@/api/linux/file";

export default {
  name: "UploadFile",
  props: {
    title: {
      type: String,
      default: () => "",
    },
    visible: {
      type: Boolean,
      default: () => false,
    },
    folderPath: {
      type: String,
      default: () => "",
    },
  },
  computed: {
    dialogTitle: {
      get() {
        return this.title;
      },
    },
    dialogVisible: {
      get() {
        return this.visible;
      },
    },
    getFolderPath: {
      get() {
        return this.folderPath;
      },
    },
    getFileSize() {
      if (!this.uploadFileSize || this.uploadFileSize <= 0) return "0B";
      if (this.uploadFileSize < 1024) {
        return this.uploadFileSize + "B";
      } else if (
        this.uploadFileSize > 1024 &&
        this.uploadFileSize < 1024 * 1024
      ) {
        return Math.round(this.uploadFileSize / 1024, 0) + "KB";
      }
      return Math.round(this.uploadFileSize / (1024 * 1024), 0) + "MB";
    },
  },
  watch: {
    startSetInterval(newValue, oldValue) {
      if (oldValue) {
        clearInterval(oldValue);
      }
    },
  },
  data() {
    return {
      formatData: null,
      percentage: 0,
      uploadFileSize: 0,
      uploadFileTime: 0,
      startUploadTime: 0,
      startSetInterval: null,
    };
  },
  methods: {
    // 上传的信息
    uploadFileChange(e) {
      this.formatData = new FormData();
      this.formatData.append("file", e.raw);
      this.formatData.append("filePath", this.getFolderPath);
      this.uploadFileSize = e.size;
      // 获取预计上传时间 单位秒
      setTimeout(() => {
        if (!this.startSetTimeout) {
          this.uploadFileTime = Math.round(e.size / 1000 / 684);
        }
      }, 1000);
    },

    // 确定上传
    async handleConfirm() {
      if (!this.formatData) {
        this.$message.error("请选择上传的文件");
        return;
      }
      const { code, message } = await uploadFile(this.formatData, (e) => {
        let progress = Math.round((e.loaded * 100) / e.total);
        // 更新进度条或者显示进度信息
        this.percentage = progress;
        if (this.percentage >= 100) {
          this.startUploadFile();
        }
      });
      if (code === 200) {
        this.handleClose();
        this.$emit("success");
        this.$message.success(message);
      } else {
        this.$message.error(message);
      }
    },

    // 开始执行上传时间
    startUploadFile() {
      if (!this.visible) return;
      if (this.startSetInterval) {
        clearInterval(this.startSetInterval);
      }
      this.startUploadTime = 0;
      this.startSetInterval = setInterval(() => {
        this.startUploadTime = this.startUploadTime + 1;
      }, 1000);
    },

    // 关闭
    handleClose() {
      this.formatData = null;
      (this.percentage = 0),
        (this.uploadFileTime = 0),
        (this.startUploadTime = 0),
        (this.uploadFileSize = 0),
        this.$refs.uploadFile.clearFiles();
      if (this.startSetTimeout) {
        clearTimeout(this.startSetTimeout);
        this.startSetTimeout = null;
      }
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.folder-upload-container {
  width: 100%;
  overflow: hidden;

  .folder-path {
    font-size: 20px;
    font-weight: bold;
    margin-left: 20%;

    .el-link {
      margin-left: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #409eff;
    }
  }
  .folder-upload-file {
    margin-top: 30px;
    margin-left: 20%;

    .upload-file-title {
      font-size: 20px;
      font-weight: bold;
    }

    .upload-file-vue {
      margin-top: 20px;
    }
  }

  .progress-title {
    color: #303133;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20%;
  }

  .upload-progress {
    margin-left: 20%;
    width: 65%;
  }

  .upload-wait-time {
    margin-left: 20%;
    width: 65%;
    overflow: hidden;

    .wait-content {
      color: #f56c6c;
      font-weight: bold;
      font-size: 18px;
    }

    .start-content {
      color: #67c23a;
      font-weight: bold;
      font-size: 18px;
      margin-left: 20px;
    }
  }

  .upload-progress-svg-rotate {
    animation: uploadProgressSvgRotate 2s linear infinite;
  }

  @keyframes uploadProgressSvgRotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
</style>
